import React, { useState } from 'react';
import { List, Card, Button } from 'antd';
import { getPrice2 } from '../utils';
import { TypeMap } from '../type';
type dataType = { name?: string; originalPrice: number; type: string };
const Index = () => {
  const [showCode, setShowCode] = useState<boolean>(false);
  const [showResult, setShowResult] = useState<boolean>(false);
  const data: dataType[] = [
    {
      originalPrice: 100,
      type: 'pre-sale',
    },
    {
      originalPrice: 50,
      type: 'promotion',
    },
    {
      originalPrice: 100,
      type: 'promotion',
    },
    {
      originalPrice: 100,
      type: '',
    },
    {
      originalPrice: 50,
      type: 'black-friday',
    },
    {
      originalPrice: 100,
      type: 'black-friday',
    },
    {
      originalPrice: 150,
      type: 'black-friday',
    },
    {
      originalPrice: 200,
      type: 'black-friday',
    },
  ];
  const funcStr = `
  /**
   * 原价根据不同的条件得到新的价格
   * @param originalPrice 原价
   * @param type 条件类型
   * @returns 新的价格
   */
  const getPrice2 = (originalPrice: number, type: string) => {
    switch (type) {
      case 'pre-sale':
        return originalPrice * 0.8;
      case 'promotion':
        if (originalPrice < 100) {
          return originalPrice * 0.9;
        } else {
          return originalPrice - 15;
        }
      case 'black-friday':
        if (originalPrice >= 100 && originalPrice < 200) {
          return originalPrice - 20;
        } else if (originalPrice >= 200) {
          return originalPrice - 50;
        } else {
          return originalPrice * 0.8;
        }
      default:
        return originalPrice;
    }
  };`;
  return (
    <div>
      <h3>新增需求：</h3>
      <div>
        假设业务扩大了，现在还有另一个折扣促销：黑色星期五。折扣规则如下：
      </div>
      <ul>
        <li>价格低于或等于 100 元的产品以 20% 的折扣出售。</li>
        <li>价格高于 100 元但低于 200 元的产品将减少 20 元。</li>
        <li>价格高于或等于 200 元的产品将减少 50 元。</li>
      </ul>
      <div>这个时候该怎么扩展 getPrice 函数呢？</div>
      <Button
        style={{ margin: '20px 0' }}
        type="link"
        onClick={() => setShowCode(!showCode)}
      >
        {showCode ? '隐藏代码' : '展示代码'}
      </Button>
      {showCode && (
        <pre style={{ background: '#eee', padding: 20 }}>{funcStr}</pre>
      )}
      <Button
        style={{ margin: '20px 0' }}
        type="link"
        onClick={() => setShowResult(!showResult)}
      >
        {showResult ? '隐藏结果' : '展示结果'}
      </Button>
      {showResult && (
        <List
          grid={{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3 }}
          dataSource={data}
          renderItem={(item) => (
            <List.Item>
              <Card title={TypeMap[item.type] || '正常销售'}>
                <div>原价：{item.originalPrice}</div>
                <div>现价：{getPrice2(item.originalPrice, item.type)}</div>
              </Card>
            </List.Item>
          )}
        />
      )}
    </div>
  );
};
export default Index;
